/*@import './iconfont';*/ 
@import './reset';

.container{
	width: 100%;
	background: #F5F8FA;
	overflow: hidden;
	padding-bottom: calculateRem(60px);
	.top-bar{
		width: 100%;
		height: auto;
		padding: calculateRem(15px) calculateRem(16px);
		background: white;
		box-sizing: border-box;
		border-bottom: 1px solid #dae3ea;
	
		@media only screen and (min-width: 320px){
			.top-l{	max-width: 73%;}
		}
		@media only screen and (min-width: 375px){
			.top-l{	max-width: 75%;}
		}
		@media only screen and (min-width: 414px){
			.top-l{	max-width: 77%;}
		}


		.top-l{
			/*max-width: 73%;*/
			box-sizing: border-box;
			padding-right: calculateRem(8px);
			>h2{
				margin: 0;
				color: #333333;
				font-size: calculateRem(18px);
				@include break;
				line-height: calculateRem(22px);
				max-height: calculateRem(66px);
				font-weight: bold;
				overflow: hidden;
			    @include mulell(3);

			}
			.top-line-text{
				font-size: calculateRem(15px);
				color: #4b4b4b;
				
			}
			.mt{
				margin-top: calculateRem(14px);
			}

		}
		.top-r{
			width: calculateRem(80px);
			height: calculateRem(80px);
			>img{
				width: 100%;
				height: 100%;
			}

		}
	}
	.product-introduce{
		width: 100%;
		height: auto;
		background: white;
		margin-top: calculateRem(10px);
		margin-bottom: calculateRem(16px);
		box-sizing: border-box;
		border-bottom: 1px solid #dae3ea;
		.title{
			height: calculateRem(42px);
			line-height: calculateRem(47px);
			box-sizing: border-box;
			padding: 0 calculateRem(16px);
			>span{
				font-size: 16px;
				color: #333;
				font-weight: bold;
				&:before{
					content: '';
					display: inline-block;
					width: calculateRem(4px);
					height: calculateRem(16px);
					background: #F21612;
					margin-right: calculateRem(8px);
					vertical-align: -2px;
				}
			}
		}
		.content{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 0 calculateRem(16px) calculateRem(10px);
			font-size: calculateRem(15px);
			color: #4B4B4B;
			.fix-charge{
				width: 100%;
				>h3{
					width: 100%;
					margin: 0;
					line-height: calculateRem(26px);
					font-size: calculateRem(16px);
					color: #444;
				}
				>p{
					width: 100%;
					margin: 0;
					line-height: calculateRem(28px);
					font-size: calculateRem(16px);
					margin-bottom: calculateRem(5px);
					>span{
						color: #F21612;
					}
				}
				.charge-table{
					width: 100%;
					height: auto;
					border-top: 1px solid #d5d5d5;
					border-right: 1px solid #d5d5d5;

					tr{
						&:nth-child(6n+4){
							background: #fafafa;
						}
						&:nth-child(6n+5){
							background: #fafafa;
						}
						&:nth-child(6n+6){
							background: #fafafa;
						}
						td{
							width: 58%;
							border-left: 1px solid #d5d5d5;
							border-bottom: 1px solid #d5d5d5;
							font-size: 12px;
							color: #4B4B4B;
							text-align: center;
						}
						.s-box{
							height: calculateRem(38px);
							>span{
								color: #F21612;
							}
						}
					}
					
				}
			}
		}
	}
}
.footer{
	width: 100%;
	height: calculateRem(60px);
	padding: 0 calculateRem(10px);
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: white;
	.now-sign{
		display: block;
		width: 100%;
		height: calculateRem(50px);
		background: #E62622;
		border-radius: calculateRem(5px);
		color: white;
		font-size: calculateRem(20px);
		text-align: center;
		line-height: calculateRem(50px);
		font-weight: bold;
		
		&:active{
			background: #C51B0D;
		}

	}
}

.test-dialog-mask{
	position: fixed;
	background: rgba(0,15,25,.6);
	z-index: 200;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	.test-dialog{
		position: absolute;
		bottom: calculateRem(10px);
		left: calculateRem(10px);
		right: calculateRem(10px);

		border-radius: calculateRem(13px);
		height: calculateRem(224px);
		background: white;
		box-sizing: border-box;
		padding: calculateRem(10px);
		>h3{
			margin: 0;
			text-align: center;
			font-size: calculateRem(20px);
			color: #333;
			margin-top: calculateRem(18px);
		}
		>p{
			font-size: calculateRem(16px);
			color: #4b4b4b;
			text-align: center;
			@include break;
			line-height: calculateRem(24px);
			margin: 0;
			margin-top: calculateRem(14px);

		}
		.start-test{
			position: absolute;
			left: calculateRem(10px);
			right: calculateRem(10px);
			bottom: calculateRem(10px);

			display: block;
			
			height: calculateRem(50px);
			background: #E62622;
			border-radius: calculateRem(5px);
			color: white;
			font-size: calculateRem(20px);
			text-align: center;
			line-height: calculateRem(50px);
			
			&:active{
				background: #C51B0D;
			}
		}
		.close-btn{
			width: calculateRem(32px);
			height: calculateRem(32px);
			position: absolute;
			top: calculateRem(-47px);
			right: calculateRem(15px);
			border-radius: 50%;
			&:after{
				content: '';
				display: block;
				width: 2px;
				height: calculateRem(15px);
				background: rgba(255,255,255,.6);
				position: absolute;
				bottom: calculateRem(-15px);
				left: calculateRem(15px);
			}
			>img{
				width: 100%;
				height: 100%;
			}
		}
	}

}

.free-dialog-mask,.nomatch-dialog-mask{
	position: fixed;
	background: rgba(0,15,25,.6);
	z-index: 200;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	.free-dialog,.nomatch-dialog{
		position: absolute;
		bottom: calculateRem(10px);
		left: calculateRem(10px);
		right: calculateRem(10px);

		border-radius: calculateRem(13px);
		height: calculateRem(254px);
		background: white;
		box-sizing: border-box;
		padding: calculateRem(10px);
		>h3{
			margin: 0;
			text-align: center;
			font-size: calculateRem(20px);
			color: #333;
			margin-top: calculateRem(11px);
		}
		>p{
			font-size: calculateRem(16px);
			color: #4b4b4b;
			text-align: left;
			@include break;
			line-height: calculateRem(24px);
			margin: 0;
			margin-top: calculateRem(14px);

		}
		.start-test{
			position: absolute;
			left: calculateRem(10px);
			right: calculateRem(10px);
			bottom: calculateRem(10px);

			display: block;
			
			height: calculateRem(50px);
			background: #E62622;
			border-radius: calculateRem(5px);
			color: white;
			font-size: calculateRem(20px);
			text-align: center;
			line-height: calculateRem(50px);
			
			&:active{
				background: #C51B0D;
			}
		}
		.close-btn{
			width: calculateRem(32px);
			height: calculateRem(32px);
			position: absolute;
			top: calculateRem(-47px);
			right: calculateRem(15px);
			border-radius: 50%;
			&:after{
				content: '';
				display: block;
				width: 2px;
				height: calculateRem(15px);
				background: rgba(255,255,255,.6);
				position: absolute;
				bottom: calculateRem(-15px);
				left: calculateRem(15px);
			}
			>img{
				width: 100%;
				height: 100%;
			}
		}
	}

}

.nomatch-dialog-mask{
	.nomatch-dialog{
		height: calculateRem(204px);
	}
}